<script lang="ts" setup>
// import { ro } from 'element-plus/es/locale';
import menuService from '@/composable/menu';
import { useRoute } from 'vue-router';
import { watch } from 'vue';

const route = useRoute();
watch(
  route,
  () => {
    menuService.setCurrentMenu(route);
  },
  { immediate: true }
);
</script>
<template>
  <div class="admin-menu" :class="{ close: menuService.isClose.value }">
    <div class="menu w-[200px] bg-gray-800 duration-500;">
      <div class="logo">
        <i class="fab fa-app-store"></i>
        <span class="text-md">晚八点直播</span>
      </div>
      <!-- 菜单 -->
      <div class="left-contain">
        <dl v-for="(singeMenu, index) of menuService.menus.value" :key="index">
          <dt @click="menuService.showOrHideParentMenu(singeMenu)">
            <section>
              <i class="mr-1 text-2xl" :class="singeMenu.icon"></i>
              <span class="text-md">{{ singeMenu.title }}</span>
            </section>
            <section>
              <i class="fas fa-angle-down duration-300" :class="{ 'rotate-180': singeMenu.isClick }"></i>
            </section>
          </dt>
          <dd :class="singeMenu.isClick ? 'block' : 'hidden'">
            <div
              v-for="(chileMenu, key) of singeMenu.children"
              class="bg-slate-600 mx-2"
              :class="{ active: chileMenu?.isClick }"
              :key="key"
              @click="$router.push({ name: chileMenu.route })"
            >
              {{ chileMenu?.title }}
            </div>
          </dd>
        </dl>
      </div>
    </div>
    <div class="bg block md:hidden" @click="menuService.showOrHideMenu"></div>
  </div>
</template>
<style lang="scss" scoped>
.admin-menu {
  @apply z-20;
  .menu {
    @apply h-full;
    .logo {
      @apply text-red-400 p-2 flex items-center mt-2 pl-4;
      i {
        @apply text-fuchsia-400 mr-1 text-[24px];
      }
    }
    .left-contain {
      dl {
        @apply text-gray-300 text-sm relative px-3;
        dt {
          @apply mt-4 flex justify-between;
          section {
            @apply flex items-center;
          }
        }
        dd {
          div {
            @apply p-2 my-2  duration-300 text-white rounded-md cursor-pointer hover:bg-violet-400;
            &.active {
              @apply bg-violet-600;
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .admin-menu {
    &.close {
      .menu {
        width: 70px;
        @apply duration-500;
        .logo {
          @apply flex justify-center px-0;
          i {
            @apply mr-0;
          }
          span {
            @apply hidden;
          }
        }
        .left-contain {
          dl {
            dt {
              @apply flex justify-center;
              section {
                @apply flex justify-center;
                i {
                  @apply mr-0;
                }
                span {
                  @apply hidden;
                }
                &:nth-of-type(2) {
                  @apply hidden;
                }
              }
            }
            dd {
              @apply hidden;
            }
            &:hover {
              dd {
                display: block !important;
                @apply block absolute left-full top-0 w-[200px] bg-gray-700;
              }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
  .admin-menu {
    @apply h-screen w-[200px] absolute left-0 top-0 z-50;
    .menu {
      @apply h-full z-50 absolute;
    }
    .bg {
      @apply bg-gray-100 opacity-75 w-screen h-screen z-40 absolute left-0 top-0;
    }
    &.close {
      @apply hidden;
    }
  }
}
</style>
